import React, { Component } from 'react';
import { NavBar, Icon, DatePicker, List, Picker, Button } from 'antd-mobile';
import { district } from 'antd-mobile-demo-data';
import style from './index.module.scss'
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const ins = [
  {
    uid: '1',
    username: "程娟",
    avatar: "https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1925436222,738093984&fm=111&gp=0.jpg",
    title: ' 看看卡萨啊欧克hi',
    img: 'http://dummyimage.com/345x130',
    starttime: '2020-1-1',
    endtime: '2020-1-10',
    destination: '迪拜',
    contact: '',
    dement: '迪拜之旅'
  },
  {
    uid: '2',
    username: "程娟",
    avatar: "https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1925436222,738093984&fm=111&gp=0.jpg",

    title: ' 看看卡萨啊欧克hi',
    img: 'http://dummyimage.com/345x130',
    starttime: '2020-1-1',
    endtime: '2020-1-10',
    destination: '迪拜',
    contact: '',
    dement: '迪拜之旅'
  },
  {
    uid: '3',
    username: "程娟",
   avatar: "https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1925436222,738093984&fm=111&gp=0.jpg",
 
    title: ' 看看卡萨啊欧克hi',
    img: 'http://dummyimage.com/345x130',
    starttime: '2020-1-1',
    endtime: '2020-1-10',
    destination: '迪拜',
    contact: '',
    dement: '迪拜之旅'
  },
  {
    uid: '4',
    username: "程娟",
    avatar: "https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1925436222,738093984&fm=111&gp=0.jpg",
    title: ' 看看卡萨啊欧克hi',
    img: 'http://dummyimage.com/345x130',
    starttime: '2020-1-1',
    endtime: '2020-1-10',
    destination: '迪拜',
    contact: '',
    dement: '迪拜之旅'
  },
]
class Com extends Component {
  state = {
    date: now,
    cols: 1,
    pickerValue: [],
    ins: ins,
  }
  render() {
    return (
      <div className='box'>
        <header>
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => this.props.history.go(-1)}
          rightContent={[
            '我的结伴'
          ]}
        >结伴</NavBar>
        </header>
        <div className={style.Picker}>
        <div className={style.List1}>
        <Picker
          title="目的地"
          extra="不限"
          data={district}
          value={this.state.pickerValue}
          onChange={v => this.setState({ pickerValue: v })}
          onOk={v => this.setState({ pickerValue: v })}
        >
          <List.Item>目的地</List.Item>
        </Picker>
        </div>
        <div className={style.List2}>
        <DatePicker
          value={this.state.date}
          onChange={date => this.setState({ date })}
        >
          <List.Item>出发时间</List.Item>
        </DatePicker>
        </div>
        </div>
        <div className="content">
          {
            this.state.ins.map(item => {
              return <div key={item.id}>
                <div className={style.content}>
                  <img style={{ width: '20px'}} src={item.avatar} alt="" /><h3 >{item.username}</h3>
                  <img className={style.img} src={item.img} alt=""></img>
                  <h2>{item.title}</h2><br/>
                  <p>{item.destination}</p>
                  <span>{item.starttime}-{item.endtime}</span>
                </div>
              </div>
            })
          }
        </div>
        <Button  
        type="ghost"
        size="small"
        className={style.Button}
        onClick={
          () => {
            this.props.history.push('/pattner/add')
          }
        }>+</Button>
      </div>
    );
  }
}

export default Com
